<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
		<meta name="Author" content="SkyKiDS" />
		<meta name="Keywords" content="program, programming, javascript, html, xhtml, markup, stylesheet, css, application, 자바스크립트, 프로그램, 프로그래밍, 스타일시트, SkyKiDS, 스카이키즈, calculator, 계산기, brower, 브라우저, navigator, timer, clock, watch, date, day, 타이머, 시계, 스톱워치, test, 테스트, 검사, 확인, verify" />
		<meta name="Description" content="공부하는 SkyKiDS, 프로그래밍 편에서 자바스크립트로 만든 다양한 애플리케이션 및 자료를 볼 수 있습니다." />
		<title>공부하는 SkyKiDS, 프로그래밍 편</title>
		<style type="text/css">
		<!--
			img {border:0;}
		// -->
		</style>
		<script type="text/javascript">
		<!-- <![CDATA[
			function doProcess() {
				var toNumber = document.getElementById("numberField").value;

				try
				{
					toNumber = parseInt(toNumber);
				}
				catch (e)
				{
					alert("숫자를 정확하게 입력하세요.");
					document.getElementById("numberField").focus();
					return;
				}
				finally
				{
				}

				var processName = document.getElementById("processName");
				var processResult = document.getElementById("processResult");
				var timeElapsed = document.getElementById("timeElapsed");

				var total = 0;
				var period = 0;
				var startTime = new Date();

				for (var i = 1; i <= toNumber; i++) {
					total = total + i;
				}

				var endTime = new Date();

				period = endTime - startTime;

				processName.innerHTML += "1부터 " + toNumber + "까지 더하기<br />";
				processResult.innerHTML += total + "<br />";
				timeElapsed.innerHTML += period + " (milliseconds)<br />";
			}

			function clearPanel() {
				document.getElementById("processName").innerHTML = "";
				document.getElementById("processResult").innerHTML = "";
				document.getElementById("timeElapsed").innerHTML = "";
			}

		// ]]> -->
		</script>
	</head>
	<body>
		<div id="wrapper" style="width:100%; text-align:center;">
			<div style="text-align:center;">
				<input id="numberField" type="text" value="100000" style="width:500px; text-align:right; padding-right:5px;"/>
				<input id="doProcessButton" type="button" value="Start processing!" onclick="doProcess();" />
				<input id="doProcessButton" type="button" value="Clear panel!" onclick="clearPanel();" />
			</div>
			<div>
				<span style="color:red;">주의 : 컴퓨터의 사양에 따라 큰 수를 입력하면 경고 메시지를 받을 수 있으며, 이 경우 걸린 시간은 정확하지 않습니다. 경고 메시지는 Internet Explorer에서 나타나고, Firefox에서는 나타나지 않습니다.</span>
			</div>
			<div id="showResult" style="text-align:center; margin-top:10px;">
				<table style="width:100%; text-align:center; border:1px solid black;">
					<tr>
						<th style="width:40%;">작업 내용</th>
						<th style="width:30%;">작업 결과</th>
						<th style="width:30%;">걸린 시간</th>
					</tr>
					<tr>
						<td id="processName"></td>
						<td id="processResult"></td>
						<td id="timeElapsed"></td>
					</tr>
			</div>
		</div>
	</body>
</html>
